export const option = {
  tooltip: {
    trigger: 'axis',
    //formatter: '{a}',
    textStyle: {
      fontSize: 10
    },
  },
  color: ['#2b9cdf', '#e75b2e'],
  legend: {
    orient: 'horizontal',
    left: 'center',
    data: ['CLI', 'PAR'],
    textStyle: {
      color: '#fff'
    },
    icon: 'path://M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m0 213.333334a213.333333 213.333333 0 1 1 0 426.666666 213.333333 213.333333 0 0 1 0-426.666666z'
  },
  xAxis: [{
    type: 'category',
    axisline: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#909293',
      }
    },

    axisTick: {
      show: false
    },
    axisline: {
      show: true,
      lineStyle: {
        type: 'dotted'
      }
    },
    data: ['A', 'B', 'C', 'D', 'E'],
  }],
  yAxis: [{
    type: 'value',
    min: 0,
    axisLabel: {
      textStyle: {
        color: '#909293',
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#3b4042',
      }
    },

    axisTick: {
      show: false
    },
  }],
  series: [{
    name: 'CLI',
    type: 'line',
    smooth: 0.5,
    showSymbol: false,
    data: [20, 30, 10, 80, 60],
    lineStyle: {
      color: '#2b9cdf'
    },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [{
          offset: 1,
          color: '#2c9eda'
        }, {
          offset: 0,
          color: '#1f517a'
        }]
      }
    },
    symbol: 'image://' + require('./img/icon.png'),
  }, {
    name: 'PAR',
    type: 'line',
    showSymbol: false,
    smooth: 0.5,
    lineStyle: {
      color: '#e75b2e'
    },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [{
          offset: 1,
          color: '#d44428'
        }, {
          offset: 0,
          color: '#633d29'
        }]
      }
    },
    symbol: 'image://' + require('./img/icon.png'),
    data: [10, 30, 60, 30, 20]
  }]
}

export function handlerOptions(chart, newConfig) {
  if (newConfig && (Object.keys(newConfig).length !== 0)) {
    chart.setOption({ ...newConfig }, false);
    console.log(chart.getOption());
  }

}
